<!DOCTYPE html>
<html lang="en" ng-app="mesos">
  <head>
    <meta charset="utf-8">
    <title>Mesos</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <link href="/static/css/bootstrap-3.0.3.min.css" rel="stylesheet">
    <link href="/static/css/mesos.css" rel="stylesheet">

    <link rel="shortcut icon" href="/static/ico/favicon.ico">
  </head>

  <body>
    <div data-ng-show="doneLoading" style="width: 75px; margin: 0 auto; text-align: center;">
      <img src="/static/img/loading.gif" height="64" width="64" alt="">
    </div>

    <div ng-controller="MainCntl">
      <header class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse"
              data-ng-click="navbarExpanded = !navbarExpanded">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#/">Mesos</a>
          </div>

          <div class="collapse navbar-collapse" data-collapse="!navbarExpanded">
            <ul class="nav navbar-nav">
              <li data-ng-class="{active: (navbarActiveTab === 'frameworks')}">
                <a href="#/frameworks">Frameworks</a>
              </li>
              <li data-ng-class="{active: (navbarActiveTab === 'slaves')}">
                <a href="#/slaves">Slaves</a>
              </li>
              <li data-ng-class="{active: (navbarActiveTab === 'offers')}">
                <a href="#/offers">Offers</a>
              </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
              <li>
                <p class="navbar-text" data-ng-cloak>{{state.cluster}}</p>
              </li>
            </ul>
          </div>
        </div>
      </header>

      <div class="container">
        <div class="alert" data-ng-show="state &amp;&amp; !state.leader">
          <strong>No master is currently leading ...</strong>
        </div>
        <div class="alert alert-warning hide" id="not-leader-alert">
          <button class="close" data-dismiss="alert">×</button>
          <strong>This master is <u>not the leader</u>, redirecting in {{redirect / 1000}} seconds ...</strong>
          <a href="/master/redirect">go now</a>
        </div>

        <div data-ng-repeat="alert in currentAlerts" class="alert alert-{{ alert.type }}">
          <p data-ng-show="alert.title">
            <strong>{{ alert.title }}</strong>
          </p>
          {{ alert.message }}
          <ul data-ng-show="alert.bullets" style="margin-bottom: 0;">
            <li data-ng-repeat="bullet in alert.bullets">
              {{ bullet }}
            </li>
          </ul>
        </div>

        <div ng-view></div>
      </div>
    </div>

    <script type="text/ng-template" id="template/dialog/masterGone.html">
      <div class="modal-header">
        <h4 class="modal-title">
          Failed to connect to {{rootScope.$location.host()}}:{{rootScope.$location.port()}}!
        </h4>
      </div>
      <div class="modal-body">
          Retrying in <b>{{rootScope.retry / 1000}}</b> seconds...
      </div>
      <div class="modal-footer">
        <button class="btn btn-default" ng-click="$close()">Try now</button>
      </div>
    </script>

    <script type="text/ng-template" id="template/dialog/message.html">
      <div class="modal-header">
        <h4 class="modal-title">{{ title }}</h4>
      </div>
      <div class="modal-body">
        {{ message }}
      </div>
      <div class="modal-footer">
        <a data-ng-repeat="btn in buttons" data-ng-click="$close(btn.result)"
          class="btn btn-default">
          {{ btn.label }}
        </a>
      </div>
    </script>

    <script src="/static/js/jquery-1.7.1.min.js"></script>
    <script src="/static/js/underscore-1.4.3.min.js"></script>
    <script src="/static/js/zeroclipboard-1.1.7.js"></script>
    <script src="/static/js/angular-1.2.3.min.js"></script>
    <script src="/static/js/angular-route-1.2.3.min.js"></script>
    <script src="/static/js/ui-bootstrap-tpls-0.9.0.min.js"></script>
    <script src="/static/js/relative-date.js"></script>

    <script src="/static/js/app.js"></script>
    <script src="/static/js/services.js"></script>
    <script src="/static/js/controllers.js"></script>
  </body>
</html>
